<template>
	<view class="police-wrap">
		<view class="search-wrap">
			<view class="search-box">
				<text class="title">日期范围</text>
				<view class="picker-box">
					<picker mode="date" @change="bindDateStartChange" class="picker-date">
						<view class="picker-date-value">{{startTime}}</view>
						<image src="../../static/police/ic_calendar@2x.png" class="picker-date-icon"></image>
					</picker>
					<text class="line">-</text>
					<picker mode="date" @change="bindDateEndChange" class="picker-date" :start="startTime">
						<view class="picker-date-value">{{endTime}}</view>
						<image src="../../static/police/ic_calendar@2x.png" class="picker-date-icon"></image>
					</picker>
				</view>
			</view>

			<view class="btn-search" @click="onSearch">搜索</view>
		</view>

		<view class="list-box" v-if="list.length">
			<view class="list-item" v-for="item in list" :key="item.id">
				<view class="title-box">
					<text class="status" :class="item.state === 'newer' ? 'error' : 'success'">{{item.stateName}}</text>
					<text class="title-name">{{item.deviceName}} - {{item.alarmName}}</text>
				</view>

				<view class="info-con">
					<view class="row">
						<text class="title">报警规则</text>
						<text class="value">{{item.alarmRule}}</text>
					</view>

					<view class="row">
						<text class="title">报警值</text>
						<text class="value">{{item.alarmValue}}</text>
					</view>

					<view class="row">
						<text class="title">报警时间</text>
						<text class="value">{{item.alarmTime}}</text>
					</view>
				</view>

				<view class="btn-dispose" v-if="item.state === 'newer'" @click="onDispose(item.id)">处理</view>
			</view>

			<uni-load-more :status="status"></uni-load-more>
		</view>

		<view class="no-data" v-else>暂无数据！</view>

		<view class="btns">
			<view class="btn-all-dispose" @click="onAllDispose">全部处理</view>
		</view>

		<image class="bt-shadow" src="../../static/index/bg_shadow.png"></image>
		<image class="icon-rule" src="../../static/police/ic_bj@2x.png" @click="gotoRule"></image>
	</view>
</template>

<script>
	import moment from "@/utils/moment.js"
	import {
		checkDate
	} from '../../common/common.js'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import basePath from "@/common/basePath.js"
	import {
		GetObjProperty,
		IsArray
	} from "@/common/common.js"

	const today = moment().format("YYYY-MM-DD")

	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				status: 'more',
				page: 1,
				pageSize: 8,
				pageTotal: 0,
				list: [],
				startTime: today,
				endTime: today
			}
		},
		onLoad() {
			uni.startPullDownRefresh()

			this.pullDownRefresh()
		},
		onReachBottom() {
			if (this.page * this.pageSize < this.pageTotal) {
				this.page++;
				this.status = "loading";
				setTimeout(() => {
					this.getList()
				}, 200)
			}
		},
		onPullDownRefresh() {
			this.pullDownRefresh()
		},
		methods: {
			pullDownRefresh() {
				this.page = 1

				setTimeout(() => {
					this.getList(() => {
						uni.stopPullDownRefresh()
					})
				}, 100)
			},
			getList(callBack) {
				uni.request({
					url: `${basePath}/iotAlarmMessage/pageQuery`,
					method: "GET",
					data: {
						page: this.page,
						pageSize: this.pageSize,
						startTime: this.startTime + " 00:00:01",
						endTime: this.endTime + " 23:59:59"
					},
					complete() {
						callBack && callBack()
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = GetObjProperty(resData, "data")
							let rows = IsArray(GetObjProperty(data, "rows"))

							this.pageTotal = GetObjProperty(data, "totalCount", 0)

							if (this.page == 1) {
								this.list = rows;
							} else {
								this.list = this.list.concat(rows);
							}
							if (this.page * this.pageSize >= this.pageTotal) {
								this.status = "noMore";
							}
						}
					}
				})
			},
			bindDateStartChange: function(e) {
				this.startTime = e.target.value
			},
			bindDateEndChange: function(e) {
				this.endTime = e.target.value
			},
			onSearch() {
				this.page = 1

				this.getList()
			},
			gotoRule() {
				uni.navigateTo({
					url: '../policeRule/policeRule'
				})
			},
			onAllDispose() {
				uni.showModal({
					title: '提示',
					content: '确定处理所有数据？',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: `${basePath}/iotAlarmMessage/handleAll`,
								method: 'GET',
								success: res => {
									let resData = GetObjProperty(res, "data")

									uni.showToast({
										icon: 'none',
										title: GetObjProperty(resData, "uiMsg")
									})

									if (resData.code === 200 && resData.success) {
										this.onSearch()
									}
								}
							})
						}
					}
				});
			},
			onDispose(id) {
				uni.showModal({
					title: '提示',
					content: '确定处理该数据？',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: `${basePath}/iotAlarmMessage/handle?id=${id}`,
								method: 'GET',
								success: res => {
									let resData = GetObjProperty(res, "data")

									uni.showToast({
										icon: 'none',
										title: GetObjProperty(resData, "uiMsg")
									})

									if (resData.code === 200 && resData.success) {
										this.replaceData(id)
									}
								}
							})
						}
					}
				});
			},
			replaceData(id) {
				let removeIndex = null, indexData = {}

				this.list.forEach((item, index) => {
					if (GetObjProperty(item, "id") === id) {
						removeIndex = index
						indexData = item
					}
				})
				
				indexData.state = "solve"
				indexData.stateName = "已处理"

				if (removeIndex !== null) this.list.splice(removeIndex, 1, indexData)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.police-wrap {
		position: relative;
		width: 100%;
		height: 100vh;

		.search-wrap {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;

			.search-box {
				flex: 1;
				display: flex;
				align-items: center;
				margin-right: 30rpx;

				.title {
					width: 140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;

					&::after {
						content: "：";
					}
				}

				.picker-box {
					flex: 1;
					display: flex;

					.line {
						margin: 0 16rpx;
						color: #999999;
					}

					.picker-date {
						display: flex;
						align-items: center;
						width: 164rpx;
						height: 60rpx;
						padding: 0 10rpx;
						background-color: #F5F7F9;
						border-radius: 8upx;
						box-sizing: border-box;

						.picker-date-value {
							flex: 1;
							float: left;
							margin-right: 10rpx;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
							text-align: center;
							vertical-align: middle;
						}

						.picker-date-icon {
							float: right;
							width: 20rpx;
							height: 18rpx;
							margin-top: 6rpx;
							vertical-align: middle;
						}
					}
				}
			}

			.btn-search {
				width: 96rpx;
				height: 50rpx;
				background-color: #FFFFFF;
				border-radius: 60rpx;
				box-shadow: 0 0 20rpx #D7E5F1;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2573B0;
				line-height: 50rpx;
				text-align: center;
			}
		}

		.no-data {
			width: 100%;
			margin-top: 200rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-top: 100rpx;
			padding-bottom: 136rpx;

			.list-item {
				position: relative;
				width: calc(100% - 60rpx);
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				box-shadow: 0 0 20rpx #DFE9ED;
				box-sizing: border-box;

				&:first-child {
					margin-top: 20rpx;
				}

				&:not(:last-child) {
					margin-bottom: 48rpx;
				}

				.title-box {
					display: flex;
					align-items: center;

					.status {
						width: 78rpx;
						height: 30rpx;
						border-radius: 4rpx;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 30rpx;
						text-align: center;

						&.success {
							background-color: rgba(92, 204, 114, .3);
							color: #5CCC72;
						}

						&.error {
							background-color: rgba(235, 103, 103, .3);
							color: #EB6767;
						}
					}

					.title-name {
						flex: 1;
						margin-left: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.info-con {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.row {
						display: flex;
						align-items: flex-start;
						width: 100%;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;

						&:not(:last-child) {
							margin-bottom: 20rpx;
						}

						.title {
							width: 120rpx;
							text-align: right;

							&::after {
								content: "：";
							}
						}

						.value {
							flex: 1;
						}
					}
				}

				.btn-dispose {
					position: absolute;
					right: 30rpx;
					bottom: 36rpx;
					width: 96rpx;
					height: 50rpx;
					background-color: #2573B0;
					border-radius: 60rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
				}
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			width: 100%;

			.btn-all-dispose {
				width: 100%;
				height: 88rpx;
				background-color: #2573B0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}

		.bt-shadow {
			position: fixed;
			bottom: 88rpx;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 48rpx;
		}

		.icon-rule {
			position: fixed;
			right: 10rpx;
			bottom: 94rpx;
			z-index: 3;
			width: 136rpx;
			height: 136rpx;
		}
	}
</style>
